<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <PageTools ref="pages" @query="screen">
          <template v-slot:before>
            <el-button type="primary" plain @click="add">添加页面</el-button>
          </template>
        </PageTools>
        <el-divider />
        <!-- 数据表格 -->
        <el-table
          style="width: 100% "
          :data="tableData"
          border
          class="dis"
        >
          <el-table-column
            prop="title"
            label="标题"
            align="center"
          />
          <el-table-column
            label="内容"
            prop="content"
            align="center"
          >
            <template v-slot="{row}">
              <el-col
                :label="row.content"
                :value="row.content"
                v-html="row.content"
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="操作"
            align="center"
            width="180px"
          >
            <template v-slot="{row}">
              <el-button
                size="mini"
                plain
                type="primary"
                @click="handleEdit(row.id)"
              >编辑</el-button>
              <el-button
                size="mini"
                type="danger"
                plain
                @click="del(row.id)"
              >删除</el-button>
            </template>
          </el-table-column>

        </el-table>
        <el-divider />
        <!-- 弹窗 -->
        <el-dialog
          title="添加页面"
          :visible="dialogFormVisible"
          @close="closeFn"
        >
          <el-form
            ref="form"
            label-width="120px"
            :model="form"
            :rules="rules"
          >
            <el-form-item label="标题：" prop="title">
              <el-input v-model="form.title" style="width:80%" />
            </el-form-item>
            <el-form-item label="内容：" prop="content">
              <!-- <el-input v-model="form.content" autocomplete="off" /> -->
              <quill-editor
                v-model="form.content"
                class="quill-editor"
                style="width:80%"
              />
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button size="small" plain @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" size="small" plain @click="addPages()">确 定</el-button>
          </div>
        </el-dialog>

        <!-- 分页 -->
        <el-row type="flex" justify="center">

          <el-pagination
            :page-size="limit"
            layout="prev, pager, next"
            :total="total"
            background=""
            @current-change="currentChangeFn"
          />
        </el-row>
      </el-card>
    </div>
  </div>
</template>

<script>
// import PageTools from '@/components/PageTools/index.vue'
import { getPages, addPagesList, delPages, editPages, getPagesById, getPagesNum } from '@/api/pages'
export default {
  data() {
    return {

      total: 0,
      limit: 3,
      start: 0,
      editorOption: { /* quill options */ },
      tableData: [],
      dialogFormVisible: false,
      form: {
        title: '',
        content: '',
        id: ''
      },
      rules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入内容', trigger: 'blur' }
        ]
      }

    }
  },
  created() {
    // 获取页面列表
    this.getPages()
  },
  methods: {

    // 查询/筛选
    async screen() {
      const value = this.$refs.pages.value
      // console.log(138, value)
      const res = await getPages({ _limit: this.limit, title_contains: value })
      this.tableData = res.data
      this.total = res.data.length
      // console.log(127, res, this.tableData)
    },
    // 确认添加
    async addPages() {
      // 表单校验
      await this.$refs.form.validate()
      // 根据id判断是新增还是编辑
      if (this.form.id) {
        // 有id则是编辑，调用编辑接口
        await editPages({ title: this.form.title, id: this.form.id, content: this.form.content })
        // console.log(143, this.form.id, this.form.content.slice(3, -4))
      } else {
        // 没有id则是新增 调用新增接口
        await addPagesList(this.form)
      }
      this.closeFn()
    },
    // 添加页面
    add() {
      this.dialogFormVisible = true
    },
    // 关闭弹窗 刷新页面
    closeFn() {
      this.dialogFormVisible = false
      //     // 清空表单
      this.form = {}
      //     //   清空校验规则
      this.$refs.form.resetFields()
      this.getPages()
    },
    // 分页器
    currentChangeFn(curPage) {
      this.start = (curPage - 1) * this.limit
      this.getPages()
    },
    // 获取页面列表
    async getPages() {
      const res = await getPages({
        _limit: this.limit,
        _start: this.start
      })

      this.tableData = res.data
      const res2 = await getPagesNum()
      this.total = res2.data
    },
    // 编辑
    async handleEdit(id) {
      this.dialogFormVisible = true
      const res = await getPagesById(id)
      // console.log(res)
      // 回显
      this.form = res.data
    },
    // 删除
    del(id) {
      this.$confirm('确定删除此客户吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await delPages(id)
        if (this.tableData.length === 1 && this.start >= this.limit) {
          this.start -= this.limit
        }
        this.getPages()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dis{
  margin-top:20px
}
::v-deep .ql-editor {

  min-height: 300px;

}
</style>
